<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <img src="../images/1.png" alt="" />
      <button class="btn">点击切换</button>
    </div>
    <script>
      var num = 1;
      var btns = document.querySelector(".btn");
      var imgEle = document.querySelector("img");
      //点击按钮切换下一张图片
      setInterval(function () {
        btns.onclick = function () {
          num++;
          imgEle.style.transition = "all 1s";
          imgEle.style.opacity = 0;
          imgEle.ontransitionend = function () {
            imgEle.src = `../images/${num}.png`;
            imgEle.style.opacity = 1;
          };
          if (num == 6) {
            num = 1;
          }
        };
      }, 3000);
    </script>
  </body>
</html>
